<template>
  <div class="myCheckBoxWrapper" @click="toggle">
    <span class="circle positionR MR5" :class="{selected:checked}">
      <i></i>
    </span>
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checked: false
    }
  },
  watch: {
    value(v) {
      this.checked = v
    }
  },
  methods: {
    toggle() {
      this.checked = !this.checked
      this.$emit('input', this.checked)
    }
  }
}
</script>

<style lang="stylus" scoped>
.myCheckBoxWrapper
  display inline-block
  line-height 20px
  .circle
    display inline-block
    width 20px
    height 20px
    border-radius 50%
    border 1px solid #ccc
    vertical-align middle
    top -1px
    &.selected
      background rgb(76, 216, 100)
      border none
      &>i
         transform: translate(-50%,-50%) rotate(45deg) scale(1);    
         transition: all .2s ease-in-out;  
    i
      width 6px
      height 12px
      content ''
      position absolute
      top 45%
      left 50%
      border 2px solid #fff
      border-top 0
      border-left 0
      -webkit-transform translate(-50%, -50%) rotate(45deg) scale(0)
      transform translate(-50%, -50%) rotate(45deg) scale(0)
</style>
